<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>课程管理 - 课堂问答</title>
    <!-- Bootstrap -->
<!--<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">-->
<!--你自己的样式文件 -->
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/base.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/fullpage.css" />
<link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/font-awesome.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/login.css" /> -->
<!-- <link href="css/your-style.css" rel="stylesheet">      -->   
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<!--<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>-->
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/jquery.min.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/fullpage.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/bootstrap.min.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/base.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/md5.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/vue.js"></script>
<script type="text/javascript" src="/root/mynet/5/quizzhku/1/Public/Js/Chart.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="/root/mynet/5/quizzhku/1/Public/Css/course.css" />

</head>
<body>
    
    <div class="navbar navbar-inverse" role="navigation">
    <div>
        <div class="navbar-header">
            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
            <a href="/root/mynet/5/quizzhku/1/index.php" class="navbar-brand">
                <i class="glyphicon glyphicon-book"></i>
                课堂问答系统
            </a>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/classes">我教的班级</a></li>
                <li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course">我教的课程</a></li>
                <?php if($has_filed > 0): ?><li><a href="javasript:;" id="nav-file">归档管理</a></li><?php endif; ?>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a href="##" data-toggle="dropdown" class="dropdown-toggle">
                        <?php echo (session('name')); ?><span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li ><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaSettings/info"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
                        <li ><a href="/root/mynet/5/quizzhku/1/index.php/Home/Auth/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="modal fade" id="file-class-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">归档管理</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3 col-md-offset-9">
                        <select class="form-control choose-course">
                            <option value="all">全部课程</option>
                            <?php if(is_array($courses)): $i = 0; $__LIST__ = $courses;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cou): $mod = ($i % 2 );++$i;?><option value="<?php echo ($cou["cou_id"]); ?>"><?php echo ($cou["cou_name"]); ?></option><?php endforeach; endif; else: echo "" ;endif; ?>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 class-panel" id="hidden-panel" value="<?php echo ($cla["cla_id"]); ?>">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h1 class="panel-title"><a><?php echo ($cla["cla_name"]); ?> - <?php echo ($cla["cou_name"]); ?></a></h1>
                                <div class="dropdown pull-right">
                                    <a class="class-edit dropdown-toggle" href="javascript:;" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="javascript:;" class="menu-class-renew">恢复</a></li>
                                        <li><a href="javascript:;" class="menu-class-delete">删除</a></li>
                                    </ul>
                                </div>
                                <p><small>开始:<?php echo ($cla["cla_start"]); ?> 结束:<?php echo ($cla["cla_end"]); ?></small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 删除班级modal -->
<div class="modal fade" id="del-filcla-modal" role="dialog" aria-labelledby="del-class">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-danger">删除班级</h4>
            </div>
            <div class="modal-body">
                <p>是否删除班级</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger btn-class-del">删除</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#nav-file").click(function() {
            $("#file-class-modal").modal("toggle");
            $("#file-class-modal .choose-course").val("all");
            postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/getFiledClass", function(err, data) {
                if (err) {
                    showError(err.message);
                } else {
                    showFiledClass(data.data); // 显示归档班级
                }
            });
        });

        var bgcolors = new Array("default", "info", "primary", "warning", "danger", "success");
        var hidden_panel = $("#hidden-panel"); // 被用来克隆的对象
        hidden_panel.hide();
        function showFiledClass(classes) {
            var dompanel = hidden_panel[0], // 转换成dom对象
                parent = hidden_panel.parent(), // 获取父节点
                panels = parent.find(".class-panel"),
                clone,  // 克隆对象
                clone_jq; // 克隆对象的jquery对象
            panels.slice(1, panels.length).remove(); // 清除班级面板
            for (var i = 0; i < classes.length; i++) {
                clone = dompanel.cloneNode(true);
                clone_jq = $(clone);
                clone_jq.find(".panel-title a").text(classes[i].cla_name + " - " + classes[i].cou_name);
                clone_jq.find(".panel-title a").attr("href", "/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/classStuInfo?cd=" + classes[i].cou_id + "&" + "cad=" + classes[i].cla_id);
                clone_jq.find("p").text("开始:" + classes[i].cla_start + " 结束:" + classes[i].cla_end);
                clone_jq.attr("value", classes[i].cla_id);
                clone_jq.show();
                parent.append(clone_jq);
            }

            $("#file-class-modal .panel").each(function() {
                var num = parseInt($(this).parent().attr("value")) % 6;
                $(this).addClass("panel-"+bgcolors[num]);
            });
            // 监听menu恢复按钮
            $("#file-class-modal .menu-class-renew").click(function() {
                var cla_id = $(this).parents(".class-panel").attr("value");
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/renewClass", {cla_id:cla_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                    }
                });
            });

            // 判断是否可以删除并弹出modal
            var cur_del_class = {};
            $("#file-class-modal .menu-class-delete").click(function() {
                cur_del_class.id = $(this).parents(".class-panel").attr("value");
                cur_del_class.name = $(this).parents(".panel-heading").find(".panel-title a").text();
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/checkIsDelete", {cla_id:cur_del_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        $("#del-filcla-modal").modal("toggle");
                        $("#del-filcla-modal").find(".modal-body p").text("是否删除班级 " + cur_del_class.name);
                    }
                });
            });

            // 确认删除
            $("#del-filcla-modal .btn-class-del").click(function() {
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/deleteClass", {cla_id:cur_del_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        $("#del-filcla-modal").modal("toggle");
                        showSuccessReload(data.message);
                    }
                });
            });
        }

        // 监听下拉框选择事件
        $("#file-class-modal .choose-course").change(function() {
            var cd = "";
            if ($(this).val() != "all")
                cd = $(this).val();
            postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/getFiledClass", (cd?{cd:cd}:{}), function(err, data) {
                if (err) {
                    showError(err.message);
                } else {
                    showFiledClass(data.data); // 显示归档班级
                }
            });
        });
    });
</script>  

    
    <div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>
    <div class="container div-course">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <button class="btn btn-default margin-bottom-10" id="btn-add-course" data-loading-text="Loading..." data-loading-text="加载中...">添加课程</button>
            </div>
        </div>
        <div class="row">
            <?php if(($courses | count) > 0): ?><div class="col-md-10 col-md-offset-1">
                    <table class="table table-hover ">
                        <tr class="table-header">
                            <!-- <th><input type="checkbox" class="select-all"></th> -->
                            <th>课程名称</th>
                            <th>课程代码</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <?php if(is_array($courses)): $i = 0; $__LIST__ = $courses;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$cou): $mod = ($i % 2 );++$i;?><!-- 添加课程时动态显示 -->
                            <tr class="course-row" value="<?php echo ($cou["cou_id"]); ?>">
                                <!-- <td><input type="checkbox"></td> -->
                                <td><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaClass/classes?cd=<?php echo ($cou["cou_id"]); ?>"><?php echo ($cou["cou_name"]); ?></a></td>
                                <td><?php echo ($cou["cou_code"]); ?></td>
                                <td>
                                    <?php if($cou["is_available"] == 0): ?>不可用
                                        <?php else: ?>
                                        可用<?php endif; ?>
                                </td>
                                <td class="edit-course">
                                    <span class="span-edit glyphicon glyphicon-option-horizontal" title="编辑"></span>
                                    <span class="span-del glyphicon glyphicon-option-horizontal" title="删除"></span>
                                </td>
                            </tr><?php endforeach; endif; else: echo "" ;endif; ?>
                    </table>
                </div>
            <?php else: ?>
                <div class="col-md-10 col-md-offset-1 display-hint">
                    <p>点击上方创建课程按钮创建一个课程</p>
                </div><?php endif; ?>
        </div>
        <!-- count:课程个数 page:总页数 np:当前页数 -->
        <div class="row">
            <?php if($pageinfo['page'] > 1): ?><div class="col-md-3 col-md-offset-5">
                    <ul class="pagination">
                        <li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course?np=1">&laquo;首页</a></li>
                        <?php if($pageinfo['np']-1 > 0): ?><li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course?np=<?php echo ($pageinfo['np']-1); ?>"><?php echo ($pageinfo['np']-1); ?></a></li><?php endif; ?>
                        <li class="active"><a href="javasript:;"><?php echo ($pageinfo["np"]); ?></a></li>
                        <?php if($pageinfo['np']+1 <= $pageinfo['page']): ?><li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course?np=<?php echo ($pageinfo['np']+1); ?>"><?php echo ($pageinfo['np']+ 1); ?></a></li><?php endif; ?>
                        <li><a href="/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course?np=<?php echo ($pageinfo["page"]); ?>">末页&raquo;</a></li>
                    </ul> 
                </div><?php endif; ?>
        </div>
        <!-- 删除课程modal -->
        <div class="modal fade" id="del-confirm" role="dialog" aria-labelledby="del-course">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title text-danger">删除课程</h4>
                    </div>
                    <div class="modal-body">
                        <p>是否删除课程</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-del" type="button" class="btn btn-danger">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加课程modal -->
        <div class="modal fade" id="add-course-modal" role="dialog" aria-labelledby="add-course">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">添加课程</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <form class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" id="course_name" placeholder="请输入课程名"
                                           required>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" id="course_code"
                                           pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
                                </div>
                                <div class="form-group checkbox">
                                    <label>
                                        <input  type="checkbox" id="is_available"/>是否立即启用
                                    </label>
                                </div>
                            </form>
                            <div class="col-md-6">
                                <p class="text-info">同一名老师下的课程名不允许重复</p></br>
                                <p class="text-info">课程代号可以填写教务处的代码,如果不清楚,请空缺</p>
                                <p class="text-info">选择立即启用课程后,学生可以通过课程名找到该课程</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-mod-add" type="button" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改课程modal -->
        <div class="modal fade" id="edit-course-modal" role="dialog" aria-labelledby="edit-course">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">修改课程信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程名称</label>
                                <div class="col-sm-6">
                                    <p class="form-control-static" id="edit-course-name"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">课程代码</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="edit-course-code"
                                           pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-3">
                                    <div class="checkbox">
                                        <label>
                                            <input value="1" type="checkbox" id="edit-is-available"/>是否可用
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <span class="text-danger">停用课程后，学生不能找到该课程</span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="btn-mod-edit" type="button" class="btn btn-primary">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){

            var btn_add_course = $("#btn-add-course");
            var btn_mod_add = $("#btn-mod-add");
            var obj_name = $("#course_name");
            var obj_code = $("#course_code");
            var obj_available = $("#is_available"); // 添加表单对象

            var obj_edit = $(".span-edit");
            var btn_mod_edit = $("#btn-mod-edit");
            var input_edit_name = $("#edit-course-name");
            var input_edit_code = $("#edit-course-code");
            var input_is_available = $("#edit-is-available");
            var upd_id; // 更新的id


            var obj_delete = $(".span-del");
            var del_id; // 保存需要删除的值



            /*// 处理全选框
             var chebox_all = $(".select-all");
             var chebox_item = $(".course-row :checkbox")
             chebox_item.click(function() {
             alert($(".course-row :checked").length);
             });
             chebox_all.click(function() {
             chebox_item.prop("checked", $(this).is(":checked"));
             });*/

            // 显示和隐藏编辑按钮
            $(".table tr").mouseenter(function() {
                $(this).find(".edit-course span:first-child").removeClass("glyphicon-option-horizontal").addClass("glyphicon-pencil");
                $(this).find(".edit-course span:last-child").removeClass("glyphicon-option-horizontal").addClass("glyphicon-remove");
            });
            $(".table tr").mouseleave(function() {
                $(this).find(".edit-course span").removeClass("glyphicon-pencil").removeClass("glyphicon-remove").addClass("glyphicon-option-horizontal");
            });

            btn_add_course.click(function() {
                $("#add-course-modal").modal("toggle");
                
            });
            
            // 添加课程
            btn_mod_add.click(function() {
                $(this).button('loading');
                var course_name = obj_name.val();
                var course_code = obj_code.val();
                var available = obj_available.is(":checked");
                if(available){
                    available = 1;
                }
                else{
                    available = 0;
                }
                if(course_name != ""){
                    postData = {cou_name:course_name,cou_code:course_code,is_available:available};
                    postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/addCourse", postData, function(err, data){
                        if (err) {
                            //status==0 表明验证是错误的,错误信息在message中
                            showError(err.message);
                        } else {
                            $("#add-course-modal").modal("toggle");
                            showSuccessReload(data.message);
                        }
                    });
                } else {
                    showError("课程名不能为空");
                    obj_name.focus();
                }
                $(this).button('reset');
            });

            // 修改课程信息
            obj_edit.click(function() {
                $("#edit-course-modal").modal("toggle");

                var parents = $(this).parents(".course-row");
                upd_id = parents.attr("value"); // 保存当前修改的课程id
                if ($.trim(parents.find("td:nth-child(3)").text()) === '可用') {
                    input_is_available.attr("checked", "checked");
                }
                input_edit_code.val(parents.find("td:nth-child(2)").text());
                input_edit_name.text(parents.find("td:nth-child(1)").text());
            });

            btn_mod_edit.click(function() {
                var is_available = input_is_available.is(":checked");
                if(is_available){
                    is_available = 1;
                }
                else{
                    is_available = 0;
                }
                postData = {cou_id:upd_id,cou_code:input_edit_code.val(),is_available:is_available};
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/updateCourse", postData, function(err, data){
                    if (err) {
                        //status==0 表明验证是错误的,错误信息在message中
                        showError(err.message);
                    } else {
                        location.assign("/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/course");
                    }
                });
            });

            // 确认删除课程
            $("#btn-del").click(function(){
                $("#del-confirm").modal("toggle");
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/deleteCourseConfirm", {cou_id:del_id}, function(err, data) {
                    if (err) {
                        //删除失败
                        showError(err.message);
                    } else {
                        // 删除成功
                        showSuccess(data.message);
                        $(".course-row[value='"+del_id+"']").fadeOut("slow"); // 不刷新页面
                    }
                });
            });

            // 监听删除按钮
            obj_delete.click(function() {
                del_id = $(this).parents(".course-row").attr("value");
                var del_name = $(this).parents(".course-row").find("td:first-child").text()
                $("#del-confirm").find(".modal-body p").text("是否删除课程 " + del_name);
                postApi("/root/mynet/5/quizzhku/1/index.php/Home/TeaCourse/deleteCourse", {cou_id:del_id}, function(err, data) {
                    if (err) {
                        //删除失败
                        showError(err.message);
                    } else {
                        // 可以删除，弹出确认框
                        $("#del-confirm").modal("toggle");
                    }
                });
            });
        });
    </script>

</body>